Step 1 of 3: Creating an Application with a C1ListBox Control

In This Topic

In this step, you'll create a UWP application in Visual Studio using ListBox for UWP.

Complete the following steps:

In Visual Studio, select File | New | Project.

In the New Project dialog box, select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows). Enter a Name and click OK to create your project.

Right-click the project name in the Solution Explorer and select Add Reference.

In the Reference Manager dialog box, expand Universal Windows and select Extensions; you should see the UWP assemblies in the center pane. Select the C1.UWP and C1.UWP.Tile assemblies and click OK.

Open MainPage.xaml if it isn't already open, and add the following markup within the <Page> tag:

Markup	Copy Code
xmlns:c1="using:C1.Xaml" xmlns:c1tile="using:C1.Xaml.Tile"

Place the cursor between the <Grid> and </Grid> tags, and click once.

Add the following <StackPanel> markup between the <Grid> and </Grid> tags to add a StackPanel containing a TextBlock and ProgressBar:

Markup	Copy Code
<StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>

Markup

Copy Code

<StackPanel x:Name="loading" VerticalAlignment="Center">
    <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Width="200" Height="4"/>
</StackPanel>

The TextBlock and ProgressBar will indicate that the C1ListBox is loading.

Navigate to the Toolbox and double-click the C1ListBox icon to add the control to the grid. This will add the reference and XAML namespace automatically.

Edit the <Xaml:C1ListBox> tag to customize the control:

Markup	Copy Code
<c1:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></c1:C1ListBox>

This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.

Add the following markup between the <Xaml:C1ListBox> and </Xaml:C1ListBox> tags:

Markup	Copy Code
<c1:C1ListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" /> </Grid> </DataTemplate> </c1:C1ListBox.PreviewItemTemplate> <c1:C1ListBox.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Content}" Stretch="UniformToFill" /> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom" /> </Grid> </DataTemplate> </c1:C1ListBox.ItemTemplate>

Markup

Copy Code

<c1:C1ListBox.PreviewItemTemplate>
  <DataTemplate>
    <Grid Background="Gray">
      <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" />
    </Grid>
  </DataTemplate>
</c1:C1ListBox.PreviewItemTemplate>
<c1:C1ListBox.ItemTemplate>
  <DataTemplate>
    <Grid>
      <Image Source="{Binding Content}" Stretch="UniformToFill" />
      <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom" />
    </Grid>
  </DataTemplate>
</c1:C1ListBox.ItemTemplate>

This markup adds data templates for the C1ListBox control's content. Note that you'll complete binding the control in code.

What You've Accomplished

You've successfully created a UWP style application containing a C1ListBox control. In the next step, Step 2 of 3: Adding Data to the ListBox, you will add the data for C1ListBox.